<template>
  <div id="root">
    <div class="ChatApp">
      <!-- <header class="Navbar">
                <div class="Navbar-left">
                    <button class="Btn">
                    </button>
                </div>
                <div class="Navbar-main">
                    <img class="Navbar-logo" src="@/assets/logo.png" alt="官方客服"> 
                    <div class="Navbar-inner">
                        <h2 class="Navbar-title">官方客服</h2>
                        
                    </div>
                </div>
            </header> -->
      <div class="MessageContainer" tabindex="-1">
        <div class="PullToRefresh">
          <div class="PullToRefresh-inner">
            <div id="messageContainer" class="PullToRefresh-content" ref="messageText">
              <div class="message-list">
                <div
                  v-for="msg in messages"
                  :key="msg.id"
                  :class="['message-bubble', msg.isSent ? 'sent' : 'received']"
                >
                  <div class="Message-left">
                    <div class="Message-main">
                      <div class="Message-inner">
                        <div class="Message-content">
                          <div class="Bubble text">
                            <p>{{ msg.text }}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ChatFooter">
        <div
          class="ScrollView ScrollView--x ScrollView--hasControls QuickReplies"
          data-visible="true"
        ></div>
        <div class="Composer">
          <div class="Composer-inputWrap">
            <div>
              <textarea
                class="Input input-filed Input--outline Composer-input"
                type="text"
                placeholder="请输入想咨询的问题"
                name=""
                id=""
                rows="1"
                @keyup.enter="send"
                v-model="sendTest"
              >
              </textarea>
            </div>
          </div>
          <div class="Composer-actions">
            <button
              class="Btn send-button Btn--primary Composer-sendBtn"
              type="button"
              @click="send"
            >
              发送
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from "vue";
import axios from "axios";

export default {
  name: "Home",
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem("user")),
      sendTest: "",
      text: "",
      messages: [
        { id: 1, text: "Hello!", isSent: true },
        { id: 2, text: "Hi there!", isSent: false },
      ],
    };
  },
  watch: {
    sendTest(newValue) {
      this.requestData.prompt = newValue;
    },
  },
  computed: {
    requestData() {
      return {
        prompt: this.sendTest,
      };
    },
  },
  methods: {
    messageChange1(response) {
      console.log(response);
      this.text = response;

      console.log("xxxxxxxxx", this.text);
      if (this.text !== null && this.text !== undefined) {
        this.text = this.text.toString(); // 将 this.text 转换为字符串类型
      } else {
        console.error("this.text is null or undefined.");
        return;
      }
      if (typeof this.text !== "string") {
        console.error("this.text is not a string.");
        return;
      }
      if (!this.text) {
        console.error("this.text is empty.");
        return;
      }

      this.text = this.text.replace(/。/g, "\n");
      const lastIndex = this.messages.length - 1;
      if (lastIndex >= 0) {
        this.messages[lastIndex].text = this.text;
      }
    },

    send() {
      console.log("123");
      axios({
        method: "post",
        url: "https://api.binjie.fun/api/generateStream",
        data: this.requestData,
        responseType: "stream", // 设置响应类型为流
        onDownloadProgress: function (progressEvent) {
          console.log(progressEvent);
          let response = progressEvent.event.currentTarget.response;
          this.messageChange1(response);
          const container = document.getElementById("messageContainer");
          container.scrollTop = container.scrollHeight;
        }.bind(this),
      });

      if (this.sendTest.trim() !== "") {
        const message = {
          id: this.messages.length + 1,
          text: this.sendTest,
          isSent: true,
        };
        this.messages.push(message);
        this.sendTest = "";
      }
      const message = {
        id: this.messages.length + 1,
        text: "",
        isSent: false,
      };
      this.messages.push(message);
      setTimeout(() => {
        const container = document.getElementById("messageContainer");
        container.scrollTop = container.scrollHeight;
      }, 0);
    },
    menuClick(index) {
      this.$router.push(index);
    },
    commandHandler(common) {
      if (common == "logout") {
        this.$confirm("此操作将注销登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //注销登录
            this.postRequest("/loginSign/logout");
            //清空用户信息
            window.sessionStorage.removeItem("tokenStr");
            window.sessionStorage.removeItem("user");
            //跳转到登录页面
            this.$router.replace("/");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    postRequest(url) {
      this.$http.post(url).then((response) => {
        console.log(response);
      });
    },
  },
};
</script>

<style scoped>
body {
  margin: 0;
  background-color: #eee;
  font-size: 1rem;
  font-weight: 400;
  color: #111;
  line-height: 1.5;
}
.S--wide #root {
  width: 100%;
  max-width: 960px;
  max-height: 700px;
}
#root,
body {
  height: 100%;
}
.Navbar,
.Navbar-main {
  align-items: center;
  display: flex;
}
.Navbar {
  background: #eee;
  border-bottom: 1px solid #ddd;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  /* position: relative; */
  z-index: 10;
  position: fixed;
  top: 0;
  width: 100%;
}
.Navbar-main {
  box-sizing: border-box;
  flex: 1;
  padding: 3px 0;
}
.Navbar-main,
.Navbar-left {
  justify-content: flex-start;
  min-height: 62px;
}
.ChatApp {
  background-color: #eee;
  color: #111;
  height: 100%;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.Navbar-left button {
  margin-top: 20px;
}
.Navbar-left,
.Navbar-logo {
  border-radius: 50%;
  width: 38px;
  margin-left: 9px;
  height: 38px;
  vertical-align: middle;
  border-style: none;
  overflow-clip-margin: content-box;
  overflow: clip;
}
.Navbar-title {
  color: #111;
  font-size: 17px;
  font-weight: 500;
  display: block;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.MessageContainer {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  position: relative;
  margin-top: 70px;
  margin-bottom: 40px;
}
.MessageContainer > .PullToRefresh {
  flex: 1;
}
.PullToRefresh {
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.PullToRefresh-content {
  height: 500px;
  overflow-y: scroll;
}
.PullToRefresh-inner {
  min-height: 100%;
}
.PullToRefresh-indicator {
  color: grey;
  height: 1.875rem;
  line-height: 1.875rem;
  margin-top: -1.875rem;
  text-align: center;
}
.PullToRefresh-fallback {
  padding-top: 12px;
  text-align: center;
}
.Flex--center {
  align-items: center;
  justify-content: center;
}
.Flex {
  display: flex;
}
.Btn:not(:disabled) {
  cursor: pointer;
}
/* [type=button], [type=reset], [type=submit], button {
      -webkit-appearance: button;
  } */
.PullToRefresh-loadMore {
  font-size: 14px;
}
.Btn--text,
.Btn--text:active,
.Btn--text:hover {
  background: transparent;
}
.Btn {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  /* -webkit-appearance: none; */
  /* background: #fff; */
  border: 1px solid #ddd;
  border-radius: 999px;
  color: #111;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  justify-content: center;
  line-height: 1.5;
  min-width: 80px;
  overflow: visible;
  padding: 0.3125rem 0.75rem;
  text-align: center;
  text-transform: none;
  transition: 0.15s ease-in-out;
  /* -webkit-user-select: none; */
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}
.Btn--text {
  border: 0;
  color: #39f;
  font-size: inherit;
  padding: 0;
  vertical-align: initial;
}
.message-list {
  font-size: 0.9375rem;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.Message {
  position: relative;
}
.Message {
  --avatarWidth: 0px;
}
.Message-content,
.Message-main {
  align-items: flex-start;
  display: flex;
}
.Message-inner {
  flex: 1;
  min-width: 0;
}
.Message.left .Bubble {
  margin-right: calc(32px + 16px);
}
.Bubble.text,
.Bubble.typing {
  word-wrap: break-word;
  box-sizing: border-box;
  min-width: 2.5rem;
  overflow-wrap: break-word;
  padding: 0.75rem;
  white-space: pre-wrap;
}
.Bubble {
  /* background: #fff; */
  border-radius: 12px;
  max-width: 42.5rem;
  min-width: 0.0625rem;
}
/* start */

.message-bubble {
  display: inline-block;
  /* background-color: #007bff; */
  /* color: #fff; */
  border-radius: 20px;
  padding: 10px 15px;
  margin-bottom: 10px;
  max-width: 80%;
}
.sent {
  align-self: flex-end;
  font-size: 0.9375rem;
  padding: 12px;
  background-color: #fff9eb;
}

.received {
  align-self: flex-start;
  font-size: 0.9375rem;
  padding: 12px;
  background-color: #fff;
}
/* end */
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.Btn,
.Bubble p {
  margin: 0;
}
.ChatFooter {
  background: #f5f5f5;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 10;
}
.Composer {
  align-items: flex-end;
  display: flex;
  padding: 0.5625rem 12px;
}
.Composer > div + div {
  margin-left: 0.5625rem;
}
.Composer-inputWrap {
  flex: 1;
  position: relative;
}
.Composer-input {
  border: 0;
  caret-color: #ff9000;
  font-size: 15px;
  line-height: 20px;
  max-height: 8.25rem;
  overflow-x: hidden;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s ease-in-out;
}
.Input {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-sizing: border-box;
  color: #111;
  display: block;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  min-height: 1.5rem;
  padding: 0.3125rem 0.75rem;
  resize: none;
  transition: 0.2s ease-in-out;
  width: 100%;
}
textarea {
  overflow: auto;
  resize: none;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
  outline: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
.Composer-actions {
  align-items: center;
  display: flex;
  height: 36px;
}
.Btn--primary:not(.Btn--outline) {
  background: linear-gradient(90deg, #ff9000 0%, #ff5000 98%);
  background-origin: border-box;
  border-color: transparent;
  color: #fff;
}
</style>
